<template>
  <div class="workTest">
<!--    <ol>-->
<!--      <li v-for="todo,index in todos" :key="index">-->
<!--        {{index}}_{{ todo.text }}-->
<!--      </li>-->
<!--    </ol>-->
<!--    <ol>-->
<!--      <li v-for="value,key in object" :key="key">-->
<!--        {{key}}_{{value}}-->
<!--      </li>-->
<!--    </ol>-->
    <Form ref="formDynamic" :model="formDynamic" :label-width="80" style="width: 300px">
      <FormItem
        v-for="(item, index) in formDynamic.items"
        v-if="item.status"
        :key="index"
        :label="'Item ' + item.index"
        :prop="'items.' + index + '.value'"
        :rules="{required: true, message: 'Item ' + item.index +' can not be empty', trigger: 'blur'}">
        <Row>
          <Col span="18">
            <Input type="text" v-model="item.value" placeholder="Enter something..."></Input>
          </Col>
          <Col span="4" offset="1">
            <Button @click="handleRemove(index)">Delete</Button>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Row>
          <Col span="12">
            <Button type="dashed" long @click="handleAdd" icon="md-add">Add item</Button>
          </Col>
        </Row>
      </FormItem>
      <FormItem>
        <Button type="primary" @click="handleSubmit('formDynamic')">Submit</Button>
        <Button @click="handleReset('formDynamic')" style="margin-left: 8px">Reset</Button>
      </FormItem>
    </Form>
  </div>
</template>

<script>
  export default {
    name: "workTest",
    data () {
      return {
        todos: [
          { text: '学习 JavaScript' },
          { text: '学习 Vue' },
          { text: '整个牛项目' }
        ],
        object: [
          {name: 'JavaScript' },
          {sex: '男' },
          {phone: '123456789' }

        ],
        // 表单数据对象
        formItem: {
          input: '',
          select: '',
          radio: 'male',
          checkbox: [],
          switch: true,
          date: '',
          time: '',
          slider: [20, 50],
          textarea: ''
        },
        index: 1,
        formDynamic: {
          items: [
            {
              value: '',
              index: 1,
              status: 1
            }
          ]
        }
      }
    },
    methods: {
      // 提交表单数据
      handleSubmit (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.$Message.success('Success!');
          } else {
            this.$Message.error('Fail!');
          }
        })
      },
      // 重置表单数据
      handleReset (name) {
        this.$refs[name].resetFields();
      },
      // 添加一个表格
      handleAdd () {
        this.index++;
        this.formDynamic.items.push({
          value: '',
          index: this.index,
          status: 1
        });
      },
      // 删除添加的表格
      handleRemove (index) {
        this.formDynamic.items[index].status = 0;
      }
    }
  }
</script>

<style scoped>

</style>
